$(function () {
    // 需求1: 用户退出
    let layer = layui.layer
    $('#logout').on('click', function () {
        //提示框
        layer.confirm('确定退出登录吗?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            //跳转页面到登录页,清除token
            location.href = '/login.html'
            localStorage.removeItem('token')
            layer.close(index)
        })
    })
    //需求 : 渲染用户名和头像
    getUserInfo()
})

//获取用户信息,渲染用户名和头像功能封装
//封装写到入口函数的外面
//我要这个函数是全局函数,后面的修改用户信息和头像成功后,
function getUserInfo() {
    axios({
        method: 'GET',
        url: '/my/userinfo',
        // headers: {
        //     Authorization: localStorage.getItem('token') || ''
        // }
    }).then(function (res) {
        //console.log(res.data);
        //判断
        if (res.data.status !== 0) {
            return layui.layer.msg(res.data.message)
        }
        // 渲染用户名头像
        renderUserInfo(res.data.data)
    })
}

function renderUserInfo(userinfo) {
    // 欢迎 名称 又要求: 有限赋值昵称,不存在才赋值登录名称.
     let name = userinfo.nickname || userinfo.username
     // 欢迎 赋值
     $('.welcome').html('欢迎^^&nbsp;&nbsp;' + name)

    //判断有没有图片图像
    if (userinfo.user_pic == null) {
        //没有图片图像:显示文字头像,隐藏图片头像
        $('.avatar-text').show().html(name[0].toUpperCase())
        $('.avatar-img').hide()
    } else {
        //有图片图像:隐藏文字头像,显示图片头像
        $('.avatar-text').hide()
        //attr 操作自定义属性; prop操作表单属性
        $('.avatar-img').show().attr('src',userinfo.user_pic)
    }
}